<!-- *Author: 黄旗, *Date: 2020-08-04 15:45:59 -->
<template>
    <div>
        <Modal v-model='modal' title="配置" :width="1100" :mask-closable='false' @on-cancel='canceledit(modalname)' class="ping">
            <Row :gutter="16">
                <Col span="4">
                    <div>
                        <div class="type">
                            <span>类型标识</span>
                            <Button size="small" class="but" @click="changeeit()">添加</Button>
                        </div>
                        <div class="typeSelect">
                            <template v-for="(item,index) in typedata" >
                                <div :key="index" :class="{'active':index===selected}"  class="type" :value="item.id" @click="changeType(item,index)" >{{ item.value }}</div>
                            </template>
                        </div>
                    </div>
                </Col>
                <Col span="11" class="modaltype">
                    <Form ref='modalname' :label-width='90' :model='modalparams' :rules='createRules'>
                        <FormItem label='类型名称: ' prop="name">
                            <Input :disabled="edit" v-model="modalparams.name" placeholder="请填写类型名称"/>
                        </FormItem>
                        <FormItem label='类型标识: ' prop="value">
                            <Input :disabled="edit" v-model="modalparams.value" placeholder="请填写类型标识"/>
                        </FormItem>
                        <FormItem label='CSS代码: '>
                            <Input v-model="modalparams.css" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请填写CSS代码"/>
                        </FormItem>
                        <FormItem label='HTML代码: '>
                            <Input v-model="modalparams.html" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请填写HTML代码"/>
                        </FormItem>
                        <FormItem label='JS代码: '>
                            <Input v-model="modalparams.js" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请填写JS代码"/>
                        </FormItem>
                        <FormItem label='备注: '>
                            <Input v-model="modalparams.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请填写备注"/>
                        </FormItem>
                    </Form>
                </Col>
                <Col v-if="yulan" span="8" >
                    <Card dis-hover :animated="false" class="templatecontrolCard">
                        <i-frame :src="yulan_url"></i-frame>
                    </Card>
                </Col>
            </Row>
            <div slot='footer'>
                <Button @click="preview"  :loading="yulan_loading" type='primary'>预览</Button>
                <!-- <Button @click="deleteedit()" v-hasC="butshow.Delete" :loading="delete_loading" v-if="edit">删除</Button> -->
                <Button @click="deleteedit()" :loading="delete_loading" v-if="typedata.length>0 &&selected !== undefined">删除</Button>
                <Button @click="canceledit(modalname)" v-else>取消</Button>
                <Button @click="submitedit(modalname)" :loading="submit_loading" type='primary'>保存</Button>
            </div>
        </Modal>
        <Modal
            v-model="modalstatus"
            title="删除提醒"
            @on-cancel="cancel" width="420">
            <p>确认删除当前配置？</p>
            <div slot="footer">
                <Button type="error" :loading="modal_loading" @click="del">确定删除</Button>
                <Button @click="cancel">取消</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import { swtmoduleupdatemoduledetail, swtmoduledeletemoduledetail } from '@api/templatecontrol';
    import { swtDetail, swtDetailvalue, previewHtml, updateSwtdetail,swtswtdeleteswtvalue } from '@api/business'
    export default {
        name: '',
        props: {
            butshow: { type: Object },
            moduledata: { type: Array }
        },
        data () {
            return {
                modalstatus:false,
                modal_loading:false,
                selectdata: [],
                modalname: 'modalname',
                modal: false,
                edit: false,
                modulebutshow: {
                    Delete: {
                        name: '-v1-swt-module-delete-module',
                        flag: '/v1/swt/module/delete-module'
                    }
                },
                // modalparams: [],
                modalparams: {},
                createRules: {
                    module_id: [{ required: true, message: '请选择模块名称', trigger: 'change' }],
                    name: [{ required: true, message: '请填写类型名称', trigger: 'blur' }],
                    value: [{ required: true, message: '请填写类型标识', trigger: 'blur' }],
                    css: [{ required: true, message: '请填写CSS代码', trigger: 'blur' }],
                    html: [{ required: true, message: '请填写HTML代码', trigger: 'blur' }],
                    js: [{ required: true, message: '请填写JS代码', trigger: 'blur' }],
                    remark: [{ required: true, message: '请填写备注', trigger: 'blur' }]
                },
                delete_loading: false,
                submit_loading: false,
                yulan_url: '',
                yulan_loading: false,
                yulan: false,
                typedata: [], // 类型列表
                selected: 0,
                module_id: null
            };
        },
        mounted () {
        },
        /* 函数方法集合 */
        methods: {
            /* @函数功能: 初始化 */
            initial (row) {
                // if (row) {
                //     this.modalparams = { id: row.id, module_id: row.module_id, name: row.name, value: row.value, css: row.css, html: row.html, js: row.js, remark: row.remark }
                //     this.edit = true
                // } else {
                //     this.modalparams = { id: 0, module_id: '', name: '', value: '', css: '', html: '', js: '', remark: '' }
                //     this.edit = false
                // }
                this.module_id = row.id
                this.gettypeData(row.id)

                // this.modal = true
            },
            gettypeData (id) {
                swtDetailvalue({ id: id }).then(res => {
                    this.typedata = res
                    if(res.length==0){
                        this.modalparams = { id: 0, swt_id: this.module_id, name: '', value: '', css: '', html: '', js: '', remark: '' }
                        this.modal = true
                    }else{
                        this.askData(res[this.selected].id)
                    }
                   
                })
            },
            askData (id) {
                swtDetail({ id: id }).then(res => {
                    this.modalparams = res
                    this.modal = true
                })
            },
            // 添加数据
            changeeit () {
                // this.modalparams = []
                // let key = Object.keys(this.modalparams[this.selected])
                this.modalparams = { id: 0, swt_id: this.module_id, name: '', value: '', css: '', html: '', js: '', remark: '' }
                this.selected = undefined
                this.yulan = false;
                this.yulan_loading = false;
                this.yulan_url = '';
            },
            // 切换tabs
            changeType (item, index) {
                this.selected = index
                this.askData(item.id)
                this.$refs[this.modalname].resetFields();
                this.yulan=false
            },
            canceledit (name) {
                this.modal = false
                this.yulan = false
                this.yulan_loading = false;
                this.yulan_url = '';
                this.modalparams = {};
                this.$refs[name].resetFields();
                this.selected = 0
            },
            submitedit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.submit_loading = true
                        updateSwtdetail(this.modalparams).then(res => {
                            if (this.edit) this.$Message.success('修改成功');
                            else this.$Message.success('添加成功');
                            this.modal = false
                            this.yulan = false
                            this.submit_loading = false
                            this.selected = 0
                            this.$emit('askData')
                        })
                    }
                })
            },
            deleteedit () {
                this.modalstatus = true
               
            },
            cancel () {
                this.modalstatus = false
                this.modal = false
                this.yulan = false
                this.submit_loading = false
                this.selected = 0
                 this.modal_loading = false
                this.$emit('askData')
                // this.gettypeData(this.module_id)
            },
            del () {
                this.modal_loading = true
                swtswtdeleteswtvalue({ id: this.modalparams.id }).then(res => {
                    this.$Message.success('删除成功');
                    this.cancel()
                    this.modal_loading = false
                })
            },
            preview () {
                if (!this.yulan) {
                    this.yulan_loading = true
                    let params = {
                        css: this.modalparams.css,
                        html: this.modalparams.html,
                        js: this.modalparams.js
                    }
                    previewHtml(params).then(res => {
                        this.log(res)
                        this.yulan_url = `${process.env.VUE_APP_API}/${res}`
                        this.yulan = true
                        this.yulan_loading = false
                    })
                }
            }
        }
    }
</script>
<style lang="less" >
.templatecontrolCard{
    position: relative;
    width: 100%;
    height: 100%;
}
.ping  .ivu-modal-body{
    padding:0 ;
}

.ping .type{
    border-bottom: 1px solid #3d3d41;
    padding: 8px 0px 8px 15px;
}
.ping .modaltype{
    border-left: 1px solid #3d3d41;
}
.ping .type:hover{
    cursor:pointer
}
.ping .ivu-col-span-4{
    padding-right: 0 !important;
}
.ping .ivu-col-span-11{
     padding-top:15px;
}
.ping .but{
    margin-left: 25px;
}
</style>
